<template>
  <d2-container class="page">
    <!-- 搜索栏开始 -->
    <template slot="header">
      <search-more
        :form="queryForm"
        isKeywordSearch
        keywordPlaceholder="标题查询"
        @search="search"
        @reset="reSearch"
      ></search-more>
    </template>
    <template slot="footer">
      <div>
        <el-pagination
          :current-page="pagination.currentPage"
          :page-size="baseQueryForm.pageSize"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin: -10px"
          @current-change="paginationCurrentChange"
          @size-change="paginationSizeChange"
        ></el-pagination>
      </div>
    </template>
    <!-- 搜索栏结束 -->
    <!-- 表格数据开始 -->
    <table-container>
      <d2-crud
        ref="d2Crud"
        selection-row
        setting-col
        :loading="tableLoading"
        :options="d2crudOptions"
        :columns="tableColumns"
        :data="tableData || []"
        :rowHandle="tableRowHandle"
        @rowUpdate="tableEditOpenDialog"
        @rowRemove="tableRowRemove"
        @selection-change="handleSelectionChange"
      >
        <div slot="header">
          <el-button @click="dialogOpen('createDialog')" type="primary" size="mini" icon="el-icon-plus">新增</el-button>
          <el-button @click="batchDelete" type="danger" size="mini" icon="el-icon-delete" plain>删除选中</el-button>
        </div>
      </d2-crud>
    </table-container>
    <!-- 表格数据结束 -->
    <!-- 新增修改弹窗 -->
    <createDialog ref="createDialog" @dialogSubmit="dialogSubmit" @refresh="getDataList"></createDialog>
  </d2-container>
</template>

<script>
import basicPage from '@/mixins'
import mixins from '@/plugin/mixins/mixin'
import * as basicConfig from './config'

export default {
  mixins: [basicPage, mixins],
  components: {
    // 基础弹窗
    createDialog: () => import('./components/create.vue')
  },
  data() {
    return {
      // 基础数据变量不可缺少 在basic-config中修改配置
      basicConfig: basicConfig,
      tableColumns: basicConfig.tableColumns.call(this),
      apiMethods: basicConfig.apiMethods.call(this),
      queryForm: { ...basicConfig.queryForm.call(this) },
      // 新增页面数据变量
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    async initPage() {
      this.getDataList()
    }
  }
}
</script>
